<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .tag{
            width: 80px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
            float: left;
            margin-right: 10px;
        }
        .contents{
            width: 350px;
            height: 200px;
            background-color: #ec6b6b;
            display: none;
        }
        .act{
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <div class="tag">体育新闻</div>
        <div class="tag">影视新闻</div>
        <div class="tag">科技新闻</div>
        <div class="tag">时政新闻</div>
        <div style="clear:both"></div>
    </div>

    <div>
        <div class="contents act">
            <p>体育新闻1</p>
            <p>体育新闻2</p>
            <p>体育新闻3</p>
            <p>体育新闻4</p>
        </div>
        <div class="contents">
            <p>影视新闻1</p>
            <p>影视新闻2</p>
            <p>影视新闻3</p>
            <p>影视新闻4</p>
        </div>
        <div class="contents">
            <p>科技新闻1</p>
            <p>科技新闻2</p>
            <p>科技新闻3</p>
            <p>科技新闻4</p>
        </div>
        <div class="contents">
            <p>时政新闻1</p>
            <p>时政新闻2</p>
            <p>时政新闻3</p>
            <p>时政新闻4</p>
        </div>
    </div>


    <script>
        /*
        * this 作业
        */
        let tags = document.getElementsByClassName("tag");
        let contents = document.getElementsByClassName("contents");
        index = 0;
        for (let i=0; i<tags.length; i++){
            tags[i].onclick = function (){
                tags[i].index = i;
                for (let j=0; j<contents.length; j++){
                    tags[j].style.backgroundColor = "gray";
                    contents[j].style.display = "none";
                }
                contents[this.index].style.display = "block";

                this.style.backgroundColor = "blue";
            }
        }

    </script>
</body>
</html>